<template>
	<div class="user-container" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
		<div class="top">
			<span>用户名: </span>
			<el-input v-model="searchInfo.userCode" placeholder="用户名" size="small" clearable style="width: 120px"></el-input>
			<span>用户类型: </span>
			<el-select v-model="searchInfo.usertype" placeholder="用户类型" size="small" style="width: 120px">
				<el-option v-for="item in rolelist" :key="item.id" :label="item.roleName" :value="item.roleId"> </el-option>
			</el-select>
			<span>用户状态: </span>
			<el-select v-model="searchInfo.userstate" placeholder="用户状态" size="small" style="width: 120px">
				<el-option label="禁用" :value="0">禁用</el-option>
				<el-option label="启用" :value="1">启用</el-option>
			</el-select>
			<el-button type="primary" style="margin-left: 30px; width: 100px" icon="el-icon-search" @click="handleQuery">查询</el-button>
			<el-button icon="el-icon-search" style="margin-left: 30px; width: 100px" size="small" @click="reset">重 置</el-button>
		</div>
		<div class="btn-div">
			<el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">添加用户</el-button>
			<el-button type="warning" icon="el-icon-upload2" @click="exportClick">导出数据</el-button>
			<el-button type="danger" icon="el-icon-delete">删除</el-button>
		</div>
		<div class="talb_div">
			<el-table :data="dataList" border @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="50"> </el-table-column>
				<el-table-column prop="userId" label="用户ID" width="180"> </el-table-column>
				<el-table-column prop="userCode" label="用户名" width="180"> </el-table-column>
				<el-table-column prop="userName" label="昵称" width="180"> </el-table-column>
				<el-table-column prop="userState" label="用户状态" width="180">
					<!-- <template slot-scope="scope">{{ scope.row.userState == 1 ? '启用' : '禁用' }}</template> -->
					<template #default="scope">{{ scope.row.userState == 1 ? '启用' : '禁用' }}</template>
				</el-table-column>
				<el-table-column prop="getCode" label="创建人" width="180"> </el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="180"> </el-table-column>
				<el-table-column label="操作" width="500"
					><template slot-scope="scope">
						<el-button @click="handleEdit(scope.row)" size="small" type="primary" icon="el-icon-edit" circle></el-button>
						<el-button @click="handleDelete(scope.row)" size="small" type="danger" icon="el-icon-delete" circle></el-button>
						<el-button @click="handleDisabled(scope.row)" size="small" type="warning">{{ scope.row.userState == 0 ? '启用' : '禁用' }}</el-button>
						<template v-if="scope.row.userState == 1">
							<el-button size="small" type="primary" @click="resetPassword(scope.row)">重置密码</el-button>
							<el-button size="small" type="primary" @click="handleRoleClick(scope.row)">分配角色</el-button>
							<el-button size="small" type="primary" @click="authUpdate(scope.row)">更改权限</el-button>
						</template>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="page_nation">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageInfo.pageNum"
				:page-sizes="[10, 20, 30, pageInfo.totalNum]"
				:page-size="pageInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageInfo.totalNum"
			>
			</el-pagination>
		</div>

		<!-- 弹窗 -->
		<el-dialog title="添加用户" :visible.sync="dialogFormVisible" width="25%" :close-on-click-modal="false">
			<div>
				<el-form :model="formInfo" :rules="rules" ref="form" label-width="100px">
					<el-form-item label="用户名" prop="userName" size="small">
						<el-input v-model="formInfo.userName"></el-input>
					</el-form-item>
					<el-form-item label="昵称" prop="userCode" size="small">
						<el-input v-model="formInfo.userCode"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="userPwd" show-password size="small">
						<el-input v-model="formInfo.userPwd"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="confirmPassword" show-password size="small">
						<el-input v-model="formInfo.confirmPassword"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="submitForm('form')">确 定</el-button>
				</div>
			</div>
		</el-dialog>
		<el-dialog title="修改用户信息" :visible.sync="isEditShow" width="25%" :close-on-click-modal="false">
			<div>
				<el-form ref="form" label-width="100px">
					<el-form-item label="用户名" size="small">
						<el-input v-model="formEditInfo.userCode"></el-input>
					</el-form-item>
					<el-form-item label="昵称" size="small">
						<el-input v-model="formEditInfo.userName"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="isEditShow = false">取 消</el-button>
					<el-button type="primary" @click="handleEditEnter">确 定</el-button>
				</div>
			</div>
		</el-dialog>
		<el-dialog title="分配角色" :visible.sync="isRoleShow" width="25%" :close-on-click-modal="false">
			<div>
				<el-form :model="formRoleInfo" ref="form" label-width="100px">
					<el-form-item label="用户名:" size="small">
						<el-input disabled v-model="formRoleInfo.userCode"></el-input>
					</el-form-item>
					<el-form-item label="分配角色:" size="small">
						<div>
							<el-checkbox-group v-model="formRoleInfo.roleCheckList">
								<el-checkbox v-for="item in rolelist" :key="item.id" :label="item.roleName" :value="item.roleId"></el-checkbox>
							</el-checkbox-group>
						</div>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="isRoleShow = false">取 消</el-button>
					<el-button type="primary" @click="handleRoleEnter">确 定</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { exportExcel } from 'excel-tools/dist/main.es.js';
export default {
	data() {
		return {
			loading: false,
			exportData: [],
			searchInfo: {
				userCode: '',
				userType: '',
				userState: '',
			},
			pageInfo: {
				pageSize: 10,
				pageNum: 1,
				totalNum: 0,
			},
			rolelist: [],
			dataList: [],
			formInfo: {
				confirmPassword: '',
				userCode: '',
				userName: '',
				userPwd: '',
			},
			formEditInfo: {
				userCode: '',
				userName: '',
				userId: 0,
			},
			formRoleInfo: {
				userCode: '',
				userId: '',
				roleCheckList: [],
			},
			form: {
				confirmPassword: '',
				userCode: '',
				userName: '',
				userPwd: '',
			},
			rules: {
				userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
				userPwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
				confirmPassword: [{ required: true, message: '请输入确认密码', trigger: 'blur' }],
			},
			dialogFormVisible: false,
			isEditShow: false,
			isRoleShow: false,
			formLabelWidth: '100px',
		};
	},
	methods: {
		//查询
		handleQuery() {
			if (this.searchInfo.userCode.length || this.searchInfo.userType.length || this.searchInfo.userState.length) {
				this.getList();
			} else {
				this.$message.warning('筛选条件不能为空');
			}
		},
		reset() {
			this.searchInfo = {
				userCode: '',
				userType: '',
				userState: '',
			};
			this.getList();
		},
		//分配角色
		handleRoleClick(row) {
			this.loading = true;
			this.formRoleInfo.userId = row.userId;
			this.formRoleInfo.userCode = row.userCode;
			this.$http.get(`/user/user-role-list/${row.userId}`).then((res) => {
				const { code, data } = res;
				if (code == 200) {
					this.formRoleInfo.roleCheckList = data.map((item) => item.roleName);
					this.loading = false;
					this.isRoleShow = true;
				}
			});
		},
		handleRoleEnter() {
			this.isRoleShow = false;
			this.loading = true;
			this.$http.put('/user/assignRole', this.formRoleInfo).then((res) => {
				if (res.code == 200) {
					this.$message.success('修改成功');
					this.loading = false;
				}
			});
		},
		//重置密码
		resetPassword(row) {
			this.$http.put(`/user/updatePwd/${row.userId}`).then((res) => {
				if (res.code == 200) {
					this.getList();
					this.$message.success('修改成功');
				}
			});
		},
		//用户状态
		handleDisabled(row) {
			this.$http
				.put('/user/updateState', {
					...row,
					userState: row.userState == 1 ? '0' : '1',
				})
				.then((res) => {
					if (res.code == 200) {
						this.getList();
						this.$message.success('修改成功');
					}
				});
		},
		//修改用户
		handleEdit(row) {
			this.formEditInfo.userId = row.userId;
			this.formEditInfo.userName = row.userName;
			this.formEditInfo.userCode = row.userCode;
			this.isEditShow = true;
		},
		//删除用户
		handleDelete(row) {
			// const userId = row.userId;
			this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					this.$http.delete(`/user/deleteUser/${row.userId}`).then((res) => {
						this.$message({
							type: 'success',
							message: '删除成功!',
						});
						this.getList();
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					});
				});
		},
		//获取选取框
		handleSelectionChange(selection, row) {
			this.exportData = [...selection];
			this.exportData.forEach((item) => {
				this.$set(item, 'userState', item.userState == 0 ? '禁用' : '启用');
			});
			console.log(selection);
		},
		//更改权限
		authUpdate(row) {
			this.$router.push({ path: '/user/auth-update', query: { userId: row.userId } });
		},
		//导出表格
		exportClick() {
			exportExcel({
				fileName: '用户列表',
				header: [
					{
						key: 'userId',
						header: '用户ID',
						width: 25,
					},
					{
						key: 'userCode',
						header: '用户名',
						width: 24,
					},
					{
						key: 'userName',
						header: '昵称',
						width: 23,
					},
					{
						key: 'userState',
						header: '用户状态',
						width: 25,
					},
					{
						key: 'getCode',
						header: '创建人',
						width: 24,
					},
					{
						key: 'createTime',
						header: '创建时间',
						width: 23,
					},
				],
				content: this.exportData, // 导出的数据
			});
		},
		//页码
		handleSizeChange(size) {
			this.pageInfo.pageSize = size;
			this.getList();
		},
		handleCurrentChange(current) {
			this.pageInfo.pageNum = current;
			this.getList();
		},
		//添加用户
		submitForm(form) {
			this.$refs[form].validate((valid) => {
				if (valid) {
					this.$http.post('/user/addUser', this.formInfo).then((res) => {
						const { code, data } = res;
						if (code == 200) {
							this.dialogFormVisible = false;
							this.getList();
							this.$message.success('添加成功');
						}
					});
				} else {
					console.log('验证失败');
					return false;
				}
			});
		},
		//修改用户
		handleEditEnter() {
			this.$http.put('/user/updateUser', this.formEditInfo).then((res) => {
				const { code, data } = res;
				if (code == 200) {
					this.isEditShow = false;
					this.getList();
					this.$message.success('添加成功');
				}
			});
		},
		getList() {
			this.loading = true;
			this.$http
				.get('user/user-list', {
					params: {
						...this.searchInfo,
						...this.pageInfo,
					},
				})
				.then((res) => {
					const {
						code,
						data: { pageSize: one, pageNum, resultList, totalNum },
					} = res;
					if (code == 200) {
						this.dataList = resultList;
						this.pageInfo.totalNum = totalNum;
						this.pageInfo.pageSize = one;
						this.pageInfo.pageNum = pageNum;
						console.log('data', res.data);
						console.log('one', one);
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
	},
	created() {
		//拿到用户下拉菜单
		this.$http.get('/role/role-list').then((res) => {
			const { code, data } = res;
			code == 200 && (this.rolelist = data);
		});
		this.getList();
	},
};
</script>

<style lang="less" scoped></style>
